<template>
	<view class="box">
		<view class="content" :style="{paddingTop:statusBarHeight}">
			<!-- 商家信息区域 -->
			<view class="merchant-info">
				<view class="left">

					<image src="/static/img/back.svg" mode="aspectFit" class="avatar" @click="goBack"></image>
					<image class="avatar" :src="merchantInfo.avatar" mode="aspectFill"></image>
					<text class="name">{{merchantInfo.name}}</text>
				</view>
				<view class="follow-btn">
					<text>关注</text>
				</view>
			</view>

			<!-- 活动海报区域 -->
			<view class="poster">
				<image :src="activityInfo.poster" mode="widthFix"></image>
			</view>

			<!-- 活动描述区域 -->
			<view class="description">
				<text class="title">{{activityInfo.title}}</text>
				<text class="desc">{{activityInfo.description}}</text>
			</view>
		</view>

		<!-- 底部加入活动按钮 -->
		<view class="bottom-btn">
			<view class="join-btn" @click="joinActivity">
				加入活动
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				statusNavHeight: 0,
				marginNavTop: 0,
				merchantInfo: {
					avatar: '/static/img/test1.jpg',
					name: '商家名字'
				},
				activityInfo: {
					poster: '/static/img/test2.jpg',
					title: '活动标题或介绍等',
					description: '活动标）活动标题或介绍等（仅有3-4行字的展示空间活动标题或介绍等（仅有3-4行字的展示空间）活动标题或介绍等（仅有3-4行字的展示空间'
				}
			}
		},
		created() {
			this.statusBarHeight = getApp().globalData.statusBarHeight + 'px'
			this.statusNavHeight = getApp().globalData.statusNavHeight + 'px'
			this.marginNavTop = (getApp().globalData.statusBarHeight + getApp().globalData.statusNavHeight + 6) + 'px'
		},
		onReachBottom() {
			console.log('到底还在出发');
		},
		onLoad(option) {
			console.log(option, '传递的参数');
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			joinActivity() {
				uni.showToast({
					title: '加入成功',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		position: relative;

		.top {
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			position: fixed;
			z-index: 5;
			background-color: #fff;

			.navbar {
				width: 100%;
				box-sizing: border-box;
			}

			.navTop {
				width: 100%;
				display: flex;
				align-items: center;

				.left {
					width: 180rpx;
					height: 100%;
					display: flex;
					align-items: center;
					padding-left: 40rpx;

					.image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.center {
					flex: 1;
					text-align: center;
					font-size: 38rpx;
					font-weight: 500;
					color: #000;
				}

				.right {
					width: 180rpx;
				}
			}
		}

		.content {
			padding: 20rpx;

			.merchant-info {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.left {
					display: flex;
					align-items: center;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.name {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
				}

				.follow-btn {
					padding: 5rpx 10rpx;
					background-color: #f2f2f2;
					border-radius: 30rpx;
					margin-left: 10px;

					text {
						font-size: 28rpx;
						color: #666;
					}
				}
			}

			.poster {
				width: 100%;
				border-radius: 12rpx;
				overflow: hidden;
				margin-bottom: 30rpx;

				image {
					width: 100%;
					display: block;
				}
			}

			.description {
				padding: 20rpx;

				.title {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 20rpx;
					display: block;
				}

				.desc {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					display: block;
				}
			}
		}

		.bottom-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			.join-btn {
				width: 100%;
				height: 88rpx;
				background-color: #007AFF;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>